<template>
	<view>
		<view class="top">

			<u-datetime-picker ref="datetimePicker" :show="show" v-model="selectDate" mode="datetime"
				:formatter="formatter" :maxDate="selectDate" @confirm="confirm" @cancel="cancel"></u-datetime-picker>
			<view @click="start('start')">开始时间：{{startTime}}</view>
			<u-datetime-picker ref="datetimePicker" :show="show2" v-model="selectDate" mode="datetime"
				:formatter="formatter" :maxDate="selectDate" @confirm="confirm" @cancel="cancel"></u-datetime-picker>
			<view @click="end('end')">结束时间：{{endTime}}</view>
			<!-- <view @click="show = true">{{date}}</view> -->
			<!-- <u-button @click="show = true">结束时间</u-button> -->
			<!-- <u-button type="primary" text="查询"></u-button> -->
			<view class="total">
				<view class="item">
					<view>合计笔数</view>
					<view>0</view>
				</view>
				<view class="item">
					<view>合计金额</view>
					<view>0.00</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="amount">
				<view class="item">
					<text>退款金额(元)</text>
					<text>0</text>
				</view>
				<view class="item">
					<text>退款笔数</text>
					<text>0</text>
				</view>
				<view class="item">
					<text>手续费(元)</text>
					<text>0</text>
				</view>
				<view class="item">
					<text>结算金额(元)</text>
					<text>0</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				show2: false,
				selectDate: Number(new Date()),
				startTime: "请选择",
				endTime: "请选择",
			}
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		methods: {
			happenTimeFun(num) { //时间戳数据处理
				let date = new Date(num);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				// let s = date.getSeconds();
				// s = s < 10 ? ('0' + s) : s; //秒补0
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m;
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},
			start(e) {
				this.show = true
			},
			end(e) {
				this.show2 = true
			},
			cancel() {
				this.show = false
			},
			confirm(e) {
				console.log(e)
				this.show = false
				this.show2 = false
				this.endTime = this.happenTimeFun(e.value)
				this.startTime = this.happenTimeFun(e.value)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		// position: relative;
		height: 350rpx;
		background-color: #00a743;
		color: #fff;

		.total {
			// position: absolute;
			display: flex;
			justify-content: space-around;
			align-items: flex-end;
			// background-color: red;

			height: 150rpx;

			.item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 50%;


			}
		}
	}

	.content {
		.amount {
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 100rpx;
			background-color: #163200;
			color: #fff;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 25rpx;


			}
		}
	}
</style>